import React, { useState } from "react";
import {
  Card,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Table,
  Tag,
  Space,
  message,
  Popconfirm,
} from "antd";

const { Option } = Select;
const { RangePicker } = DatePicker;

interface LeaveRecord {
  id: number;
  type: string;
  start: string;
  end: string;
  reason: string;
  status: "已提交" | "已通过" | "已拒绝";
  approver: string;
}

const initialRecords: LeaveRecord[] = [
  {
    id: 1,
    type: "事假",
    start: "2024-06-01",
    end: "2024-06-03",
    reason: "家中有事",
    status: "已通过",
    approver: "王主管",
  },
  {
    id: 2,
    type: "病假",
    start: "2024-06-10",
    end: "2024-06-11",
    reason: "感冒发烧",
    status: "已提交",
    approver: "",
  },
];

const Leave: React.FC = () => {
  const [form] = Form.useForm();
  const [records, setRecords] = useState<LeaveRecord[]>(initialRecords);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const [start, end] = values.range;
      setRecords([
        {
          id: Date.now(),
          type: values.type,
          start: start.format("YYYY-MM-DD"),
          end: end.format("YYYY-MM-DD"),
          reason: values.reason,
          status: "已提交",
          approver: "",
        },
        ...records,
      ]);
      form.resetFields();
      message.success("请假申请已提交！");
    } catch {
      // 校验失败无需处理
    }
  };

  const handleDelete = (id: number) => {
    setRecords(records.filter((r) => r.id !== id));
    message.success("已删除");
  };

  const columns = [
    { title: "请假类型", dataIndex: "type", key: "type" },
    { title: "开始时间", dataIndex: "start", key: "start" },
    { title: "结束时间", dataIndex: "end", key: "end" },
    { title: "原因", dataIndex: "reason", key: "reason" },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => {
        let color = "default";
        if (status === "已通过") color = "green";
        else if (status === "已拒绝") color = "red";
        else if (status === "已提交") color = "blue";
        return <Tag color={color}>{status}</Tag>;
      },
    },
    { title: "审批人", dataIndex: "approver", key: "approver" },
    {
      title: "操作",
      key: "action",
      render: (_: unknown, record: LeaveRecord) => (
        <Space>
          <Popconfirm
            title="确定要删除吗？"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button type="link" danger size="small">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <Card title="请假流程" style={{ minHeight: 500 }}>
      <Form layout="inline" form={form} style={{ marginBottom: 24 }}>
        <Form.Item
          name="type"
          label="请假类型"
          rules={[{ required: true, message: "请选择类型" }]}
        >
          <Select style={{ width: 100 }}>
            <Option value="事假">事假</Option>
            <Option value="病假">病假</Option>
            <Option value="年假">年假</Option>
            <Option value="调休">调休</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="range"
          label="请假时间"
          rules={[{ required: true, message: "请选择时间" }]}
        >
          <RangePicker />
        </Form.Item>
        <Form.Item
          name="reason"
          label="原因"
          rules={[{ required: true, message: "请输入原因" }]}
        >
          <Input style={{ width: 200 }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSubmit}>
            提交申请
          </Button>
        </Form.Item>
      </Form>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={records}
        pagination={{ pageSize: 8 }}
        bordered
      />
    </Card>
  );
};

export default Leave;
